import React, { useState } from 'react';


import ECharts from 'echarts-for-react';
import * as echarts from 'echarts';

export type MapProps = {
  style?: React.CSSProperties,
  charOption?:{
    dataAxis:  Array<string>,
    data: Array<number>,
    name: string,
    type: string,
    legendShow:boolean,
    smooth:boolean,
    position:string,
    color?:string[],
    yname:string,//y轴名称
    }
};

const BarChart: React.FC<MapProps> = (props) => {
  console.log("************************************")

    const { charOption,style} = props;

  console.log(charOption)

    const QUSHI_OPTION = {
      color:charOption.color||['#2dcbe4'],
      title: {
      },
      xAxis: {
        axisLine:{
          lineStyle:{
            type: 'dashed',
            color:"#fff",
          }
        }, 
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed'
          }
        }, 
        data: charOption.dataAxis,
        axisTick: {
              show: false
          }, axisTick: {
        alignWithLabel: true
      }
      },
      yAxis: {
        axisLine:{
          lineStyle:{
            type: 'dashed',
            color:"#fff",
          }
        },  
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        },
        name: charOption.yname,
      },
      dataZoom: [
          {
              type: 'inside'
          }
      ],
      legend:{
        padding:[10,50],
        left:charOption.position||'center',
        data: [charOption.name], 
        show: charOption.legendShow||false,
        textStyle: {
        color: "white"
        }
    },
      grid: {
        left: 70,
        right:50,
        bottom: 30,
      },
      toolbox: {
        feature: {
            saveAsImage: { 
              iconStyle: {
                borderColor: "#fff"
            }
          }
        }
       },
      tooltip: {
        trigger: 'axis'
      },
      series: [
          {
              type: charOption.type||'bar',
              name:charOption.name,
              smooth: charOption.smooth||false,
              itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#2dcbe4'},
                        {offset: 0.7, color: '#2dcbe4'},
                        {offset: 1, color: '#5eeeff'}
                      ]
                  )
              }, markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
             },   markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ], label: {
                    color: "#fff"
                  }
              },
              emphasis: {
                  itemStyle: {
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
                              {offset: 0, color: '#2dcbe4'},
                              {offset: 0.7, color: '#2dcbe4'},
                              {offset: 1, color: '#5eeeff'}
                          ]
                      )
                  }
              },
              data: charOption.data
          }
      ]
  };
  


    return (
        <>
         <ECharts option={QUSHI_OPTION}  style={style} />
        </>
    );

};

export default BarChart;